/**
 * karin 2017.3.22
 * 左侧是勾选，右侧是箭头，两者各有点击事件；左侧只有勾选圈能点击，右侧则整个文字范围能点击
 * 该组件最外层没有边框，可在父级追加className样式，添加最外层的边框
 */
import React, {Component} from 'react'

// 加载样式
import Style from './index.scss'
import '../../../styles/Cheack.scss' // 加载全局样式

export default class CheckAndArrow extends Component {
    constructor(props) {
        super(props);
        this.taxArray = ['请确认', '已确认', '审核中', '审核通过', '审核失败', '在有效期内', '已过期', '已备好', '未准备']
    }

    componentWillMount() {

    }


    /**
     * 事件
     */
    //返回的数据
    getData(type) {
        this.props.onClick(type) //传递给父组件
        //  console.log('点击Click=', data.key,data.value)
    }


    //根据不同状态确定不同的样式
    getRightTextClass() {
        let {type, status}=this.props;
        if (type == 'WZ') {
            if (status == 2) {
                return Style.warnning;
            }
            else if (status == 1) {
                return Style.confirm;
            }
            else {
                return Style.normalRight;
            }
        }
        else {
            if (status == 4 || status == 6 || status == 8) {
                return Style.warnning;
            }
            else if (status == 1 || status == 3 || status == 5 || status == 7) {
                return Style.confirm;
            }
            else if (status == 2) {
                return Style.checking;
            }
            else {
                return Style.normalRight;
            }
        }
    }

    /**
     * 组件
     */
    render() {

        const borderT = this.props.className ? ' ' + this.props.className : ''; //顶部有最上面一条边框的样式
        let {type, label, value, status}=this.props;

        return (
            <div className={Style.CheckList + borderT}>

                <dl className={'border-bottom ' + Style.dl}>
                    {/*<dt><span>&nbsp;</span></dt>*/}

                    <dd onClick={() => this.getData(type)}>
                        <div className={Style.leftText}>
                            <div className={Style.titleContainer}>
                                <div className={Style.titleBefore}>&nbsp;</div>
                                <span className={Style.title}>{label}</span>
                            </div>
                            {this.props.tips?<span className={Style.tips}>{this.props.tips}</span>:''}
                        </div>
                        {type != 'WZ' && status == 2 ? <img src="./images/taxChecking.png"/> : ''}
                        <span className={this.getRightTextClass()}>{value}</span>
                    </dd>
                </dl>

            </div>


        );
    }
}
// 
CheckAndArrow.defaultProps = {
    // 需要的数据格式    list: [{ key: 0, label: '', check: 0, value: '' },]

} 
